/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import {
  Form,
  Button,
  Badge,
  Select,
  Table,
  DatePicker,
  Descriptions,
  Tag,
  Modal,
  message,
  Popover,
  Dropdown, Drawer,
} from 'antd';
import {connect} from 'dva';
import ReactDataGrid from 'react-data-grid';
import BuildModalTitle from '@/components/BuildModalTitle';
import { afterCloseModal, popoverPrice, renderSignalIntensity, renderValveOpen } from '@/utils/utils';
import request from '@/utils/request';
import Loading from '@/components/Loading';
import stop from '@/images/stop.png';
import find from 'lodash/find';
import MyPagination from '@/components/MyPagination';
import Detail from '@/pages/Owner/Detail';
const { confirm } = Modal;
const ButtonGroup = Button.Group;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showCustom: false,
      data:[],
      editRecord:{},
      page: 1,
      per_page: 50,
      meta: {total: 0, per_page: 50,current_page:1},
      loading:true,
      tableY:400
    };
  }

  componentDidMount() {
   this.fetch({
     page: 1,
     per_page: 50,
   })
  }
  fetch=(values)=>{
    const tableY=document.body.offsetHeight -
      document.querySelector('.react-grid-Container').getBoundingClientRect().top -60;
    const that=this;
    that.setState({
      loading:false
    })
    request(`/accounts`,{
      method:'GET',
      params:{
        region_id:this.props.editRecord.id,
        ...values
      }
    }).then((response)=>{
      if(response.status===200){

        that.setState({
          loading:false,
          tableY,
          ...values
        })
        that.setState({
          data:response.data.data,
          meta:response.data.meta,
        })

      }

    });
  }
  render() {
    const that=this;
    const {data,meta,loading}=this.state
    const defaultColumnProperties = {
      resizable: true,
    };
    const columns = [
      {
        name: '序号',
        width: 50,
        key: '_index',
        frozen: true,
        formatter: (event) => {
          const {
            meta
          } = this.state;
          return <p className={'index'}>{((meta.current_page - 1) * meta.per_page) + (event.value + 1)}</p>;
        },
      },
      {
        name: '户主姓名',
        key: 'name',
        width: 180,
        frozen: true,
        formatter: (event) => {
          return <span title={event.row.name}>{event.row.name}</span>;
        },
      },
      {
        name: '户主手机',
        key: 'online_status',
        width: 100,
        formatter: (event) => {
          return <span title={event.row.mobile}>{event.row.mobile}</span>;
        },
      },
      {
        name: '水表号',
        width: 125,
        key: 'meter_number',
        formatter: (event) => {
          return <span title={event.value} style={{color:event.row.status===-1?'red':''}}>
            {event.row.status===-1&& <img style={{width:'22px',height:'22px',top:'-2px',position:'relative'}} src={stop} alt=""/>}
            {event.value}
          </span>;
        },
      },

      {
        name: '账户余额',
        width: 90,
        key: 'balance',
        formatter: (event) => {
          return <p
            className={Number(event.value) > Number(event.row.balance_alarm_amount) ? 'table-success table-status' :
              Number(event.value) >= 0 ? 'table-warm table-status' : 'table-error table-status'}>{event.value}</p>;
        },
      },
      {
        name: '阀门状态',
        key: 'valve_status',
        width: 80,
        formatter: (event) => {
          return renderValveOpen(event.value);
        },
      },
      {
        name: '信号强度',
        key: 'signal_intensity',
        width: 80,
        formatter: (event) => {
          return renderSignalIntensity(event.value);
        },
      },
      {
        name: '操作',
        width: 100,
        key: 'right',
        classname: 'operate',
        formatter: (event) => <Fragment>
          <Button
            type="primary"
            icon="eye"
            size="small"
            onClick={(e) => {
              this.setState({
                editRecord: event.row,
                infoModal: true,
              });
            }
            }
          >详情
          </Button>
        </Fragment>,
      },
    ].map(c => ({ ...defaultColumnProperties, ...c }));

    return (
      <div>
        <div>
          <div className={'table-data-content'}>
            <ReactDataGrid
              columns={columns}
              rowGetter={i => {
                return { ...data[i], _index: i };
              }}
              rowsCount={data.length}
              minHeight={this.state.tableY}


            />
            {
              loading && <Loading/>
            }
            <div style={{marginTop:'10px'}}>
              <MyPagination searchCondition={{  }}
                            resetScrollY={() => {
                              console.log('resetScrollY');
                              const table = document.querySelector('.react-grid-Canvas');
                              setTimeout(() => {
                                table.scrollTop = 0;
                                table.scrollLeft = 0;
                              }, 0);

                            }}
                            meta={meta} handleSearch={this.fetch}/>
            </div>

          </div>

        </div>
        <Drawer
          title={`${this.state.editRecord && this.state.editRecord.name} 详情`}
          placement="right"
          destroyOnClose
          onClose={() => {
            this.setState({
              infoModal: false,
              editRecord: {},
            });
          }}

          width={780}
          visible={this.state.infoModal}
        >
          <Detail meter_number={this.state.editRecord.meter_number}
                  id={this.state.editRecord.id}></Detail>
        </Drawer>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


